<template>
    <div>
        <ul class="flow-title">
            <li :class="{'flow-title-acitve':flowactive===i}" v-for="(item,i) in titlelist" :key="i" @click="flowactive=i">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "flow",
        data() {
            return {
                flowactive: 0,
                titlelist: [{
                    name: '推荐'
                }, {
                    name: "鼻部"
                }, {
                    name: "眼部"
                }, {
                    name: "面部轮廓"
                }, {
                    name: "齿科"
                }, {
                    name: "脂肪填充"
                }, {
                    name: "胸部"
                }, {
                    name: "玻尿酸"
                }]
            }
        }
    }
</script>

<style scoped>
    .flow-title {
        width: 100%;
        overflow-x: scroll;
        display: flex;
        white-space: nowrap;
        align-items: center;
    }

    .flow-title li {
        padding: 10px 0;
        float: left;
        margin: 0 15px;
    }

    .flow-title-acitve {
        font-size: 20px;
        position: relative;
    }

    .flow-title-acitve:before {
        content: '';
        width: 100%;
        height: 3px;
        background-color: #24D6C3;
        display: block;
        position: absolute;
        bottom: 11px;
        border-radius: 3px;
    }
</style>